/*
 * @Author: your name
 * @Date: 2022-02-04 10:25:31
 * @LastEditTime: 2022-02-05 14:01:06
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-vite-tsx\src\components\carousel\src\carousel.tsx
 */
import { defineComponent, ref, onBeforeUnmount, onMounted } from 'vue'
import style from './carousel.module.less'
export default defineComponent({
  name: 'Carousel',
  props: {
    current: {
      type: Number,
      default: 0
    },
    autoPlay: {
      type: Boolean,
      default: false
    },
    showDots: {
      type: Boolean,
      default: false
    },
    showDirection: {
      type: Boolean,
      default: false
    },
    duration: {
      type: Number,
      default: 3000
    },
    change: {
      type: Function,
      default: () => {}
    }
  },
  setup(props, ctx) {
    const currentIndex = ref(0)
    const direction = ref('next')
    // slot 长度判断
    const itemLength = (ctx.slots.default ? ctx.slots.default()[0].children?.length : 0) as number

    props.current > 0 ? (currentIndex.value = props.current) : 0
    let t: NodeJS.Timer

    const play = () => {
      t = setInterval(() => {
        setIndex('next')
      }, props.duration)
    }

    const setIndex = (dir: string) => {
      // console.log('===')
      if (dir == 'next') {
        direction.value = 'next'
        ctx.emit('update:current', props.current + 1)
        currentIndex.value++
        if (currentIndex.value == itemLength) {
          ctx.emit('update:current', 0)
          currentIndex.value = 0
        }
      } else if (dir == 'prev') {
        direction.value = 'prev'
        ctx.emit('update:current', props.current - 1)
        currentIndex.value--
        if (currentIndex.value == -1) {
          ctx.emit('update:current', itemLength)
          currentIndex.value = itemLength - 1
        }
      }
      ctx.emit('change', currentIndex.value)
    }

    onMounted(() => {
      play()
    })

    onBeforeUnmount(() => {
      clearInterval(t)
    })
    const handleMouseEnter = () => {
      clearInterval(t)
    }
    const handleMouseLeave = () => {
      play()
    }
    const handleDots = (index: number) => {
      // 方向控制
      if (currentIndex.value > index) {
        direction.value = 'prev'
      } else {
        direction.value = 'next'
      }
      currentIndex.value = index
    }
    return {
      direction,
      currentIndex,
      itemLength,

      setIndex,
      handleDots,
      handleMouseEnter,
      handleMouseLeave
    }
  },
  render() {
    const { default: defaultSlot } = this.$slots
    const { showDots, showDirection } = this.$props
    return (
      <>
        <div
          class={style['c-carousel']}
          onMouseenter={this.handleMouseEnter}
          onMouseleave={this.handleMouseLeave}
        >
          {/* 上下 */}
          {showDirection ? (
            <div>
              <div class={style.direction} onClick={() => this.setIndex('prev')}></div>
              <div class={style.right} onClick={() => this.setIndex('next')}></div>
            </div>
          ) : (
            ''
          )}

          {/* dots */}

          {showDots ? (
            <div>
              {' '}
              <ol class={style.dots}>
                {new Array(this.itemLength).fill(0).map((item, index) => (
                  <li
                    class={this.currentIndex == index ? style['dot-active'] : ''}
                    onClick={() => this.handleDots(index)}
                  ></li>
                ))}
              </ol>
            </div>
          ) : (
            ''
          )}

          {/* 滚动区域 */}
          <div class={style.inner}>{defaultSlot && defaultSlot()}</div>
        </div>
      </>
    )
  }
})
